<template>
	<view class="container">
	 <view class="l-head">
		 <image src="../../static/shop.png" mode="aspectFill"></image>
	     <text>惊云购</text>
	 </view>
 
		<view class="loginbox">
			      
			<view class="inputbox"> 
	    		 <view class="lab">手机号</view>
				<uni-easyinput class="inputbox" placeholder="请输入手机号" v-model="mobile" ></uni-easyinput>
			</view>
			 <view class="inputbox"> 
				 <view class="lab">密 码</view>
	         <uni-easyinput class="inputbox" type="password"   placeholder="请输入密码" v-model="password"></uni-easyinput>
			</view>
	 
			 <text class="login-btn" @click="loginbymobile">登录</text>
			 <view class="regtxt">
				 <text @click="gopage('/pages/public/forgetpassword')">忘记密码？</text>
				 <text @click="gopage('/pages/public/register')">立即注册</text>
			</view>
			 
		</view>
		
		<view class="auth">
			<view class="auth-item" @click="weixinlogin">
				<uni-icons type="weixin" color="#04BE02" size="32"></uni-icons>
				<text>微信一键登录</text>
			</view>
		</view>

	</view>
</template>

<script>
 
	
	export default{
		data(){
			return {
				mobile: '',
				password: '',
				 channel:"wxmini",//wxmini,app
				
			}
		},
		onLoad(){
			//  #ifdef APP-PLUS  
			  this.channel="app";
			 // #endif 
		},
		methods: {
			
			gopage(url){
				uni.navigateTo({
					url:url
				})
			},
			loginbymobile(){
				if(this.mobile.length<10 || this.password.length<3){
					uni.showToast({
						title:"请输入完整信息"
					})
					return ;
				}
				let param ={
					mobile:this.mobile,
					password:this.password
				};
				let that = this;
				this.$util.req("/user/loginByMobile",param,false,function(res){
					that.$util.setToken(res.data.token);
					//uni.navigateBack();
					uni.switchTab({
						url:"/pages/user/user"
					}); 
				});
			},
			 
			weixinlogin(){
				let that = this;
			      uni.login({
					provider:"weixin",
				//	onlyAuthorize:true,//此参数uni有bug不起作用
			     	success(loginRes) {
						console.log("wxlogin",loginRes);
 
					let reqparam={
						code : "",
						channel:that.$runplatform
					}
					// #ifdef APP-PLUS
						reqparam.openid=loginRes.authResult.openid;
						reqparam.unionid = loginRes.authResult.unionid;
						if(!loginRes.authResult.unionid || !loginRes.authResult.openid){
							uni.showToast({
								title:"请重新登录"
							})
							return false;
						}
					// #endif
					// #ifdef MP-WEIXIN
					   reqparam.code = loginRes.code;
					// #endif
						that.$util.req("/user/loginByWechat",reqparam,false,function(res){
							//登录成功
							that.$util.setToken(res.data.token);
							uni.switchTab({
								url:"/pages/user/user"
							}) 
						});
			     	},
					fail(e) {
						uni.showToast({
							title:"失败"+e.errMsg
						});
						console.log("登录失败");
						console.log(e);
					}
			 });
			}
		 
			 
		},

	}
</script>

<style lang='scss'>
	page{
		background: #FFFFFF;
	}
	.container{
		color: $font-color-dark;
		display: flex;
	    
		flex-direction: column;
		width: 100%;
		height: 100vh;
	}
	.auth{
		display: flex;
		justify-content: center;
		margin-top: 60upx;
		.auth-item{
			margin: 0 10upx;
			font-size: $font-sm;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}
	
	}
   .l-head{
	   display: flex;
	   margin-top: 30%;
	   justify-content: center;
	   align-items: center;
	   flex-direction: column;
	   
	   margin-bottom: 20upx;
	   image{
		   width: 200upx;
		   height: 200upx;
	   }
   }
   .loginbox{
	  display: flex;
	  flex-direction: column;
	  padding: 0 40upx;
	  align-items: center;
	   .inputbox{
		   width: 100%;
		   margin: 10upx;
		   display: flex;
           align-items: baseline;
		   .lab{
			   text-align: right;
		   		flex:1;
		   }
		   .inputbox{
			    flex:3; 
		   }
		  
	   }
	   .login-btn{
		     margin: 10upx;
		   
		   padding: 20upx 100upx;
		   background-color: #FF5A5F;
		   color: #FFFFFF;
		   
	   }
	   .regtxt{
		   margin-top: 20upx;
		   padding: 0 20upx;
		   font-size: $font-base;
		   color: $font-color-dark;
		   width: 100%;
		   
		display: flex;
		justify-content: space-between;
		}
   }
   
	 
</style>
